<template>
    <div id="blog">

      <blogheader/>



      <el-row :gutter="20">
        <el-col :span="5" style="background-color: transparent;border-right: 1px solid #409EFF">
          <div id="blog_left"  class="grid-content bg-purple">
               <div>
                 <!--轮播图-->
                 <el-carousel :interval="1000" class="slideshow" height="180px">
                   <el-carousel-item v-for="(item,index) in lunboList" :key="index" >
                     <h3><img class="" :src="item.value" @click="$router.push('/detail/'+item.descri)"></h3>
                   </el-carousel-item>
                 </el-carousel>
               </div>

                <!--日历-->
               <calender/>
                <!--我的标签-->
               <mylabel/>

                <!--友情链接-->
                <friendlylink/>


          </div>
        </el-col>
        <el-col :span="14" style="background-color: transparent" >
          <div id="blog_middle" class="grid-content bg-purple"  style="background-color: transparent"  >
                <div  class="no_content" v-if="$store.state.totalCount==0">
                    <p>暂无数据!!!&nbsp;&nbsp;&nbsp;&nbsp;<el-link type="danger" icon="el-icon-edit" @click="$router.push('/write/0')">点我发博客</el-link></p>
                </div>
                <ul class="blog_list" v-if="$store.state.totalCount!=0" >
                  <li class="one_blog" v-for="(item,index) in $store.state.cureentDataList" :key="index">
                         <!--<div class="one_blog_img" :style="{'background-image':this.abc}"></div>-->
                        <img class="one_blog_img" :src="item.content.indexImg" alt="暂无图片"/>
                        <div class="one_blog_content">
                           <div class="blog_text" >
                           <h3 @click="getDetail(item.content.id)">{{item.content.title}}</h3>
                           <h6>{{item.content.description}}</h6>
                           </div>
                           <div class="blog_label">
                             <div class="first_label">
                              <a href="javascript:;" class="article_label" @click="turnToLabel(item.dics.value)">{{item.dics.value}}</a>&nbsp;&nbsp;
                             <span><span>{{item.content.createTime}}</span></span>
                             </div>
                             <ul class="three_lable">
                               <li><span class="iconfont icon-pinglun1"></span><span>{{item.blog.comment}}</span></li>
                               <li><span id="thumbUp" class="iconfont icon-dianzan"></span><span>{{item.blog.thumbUp}}</span></li>
                               <li><span class="iconfont icon-liulan2"></span><span>{{item.blog.view}}</span></li>
                             </ul>
                           </div>
                        </div>
                     </li>
                </ul>
          </div>

            <!--分页组件-->
            <pagination v-if="$store.state.totalCount !=  0" style="margin-bottom: 10px"/>

        </el-col>
        <el-col :span="5">
                <!--右边-->
          <blogright/>
        </el-col>

      </el-row>

      <!------底部--------->
      <el-row>
        <el-col :span="24" style="background-color: transparent">
          <div class="grid-content bg-purple-dark" style="background-color: transparent">
            <!--博客底部-->

            <blogfooter style="background-color: rgba(0,0,0,.1)"/>

          </div>

        </el-col>
      </el-row>


    </div>

</template>

<script>

   import  friendlylink from  '../components/friendlylink'
   import  mylabel from  '../components/mylabel'
  import  blogheader from  '../components/blogheader'
  import  calender from '../components/calendar'
  import  blogright from '../components/blogright'
  import  pagination from  '../components/pagination'
  import  blogfooter from '../components/blogfooter'
  export default {
    name: 'blog',
    data(){
       return{
           lunbo:[],
           labelList:[],
         abc:'http://blog.php127.com/uploads/pic/201811/5bf354ebbb3ec.png',
      loading:false,

       }
    },
    components:{
       blogheader,
      calender,
      blogright,
      pagination,
      blogfooter,
      mylabel,
      friendlylink
    },
    methods:{
      turnToLabel(value){
        this.$store.dispatch('turnToLabel',{value}).then( () =>{
          this.$store.dispatch("selectPage")
        })


      },
      getDetail(id){
        // alert("进入详情")
        this.$router.push("/detail/"+id)


      },
      openHTML(count) {
        this.$message({
          dangerouslyUseHTMLString: true,
          // message: '<strong>这是 <i>HTML</i> 片段</strong>'
          message: '<strong>欢迎第'+count+'位访客!</strong>',
          customClass:'welcome',    //自定义的样式
          center:true,
          iconClass: 'iconfont icon-huanyingxiaolian'

        });
      },
      isNewVisited(){
        var _this=this
          this.axios.get("/user/getVisitorAddress").then(function (response) {
            if (response.data.code == 0) {
              if (parseInt(response.data.result) != 0) {
                   _this.openHTML(response.data.result)
              }
            }
          }).catch(function (error) {
              console.log("解析访客的ip失败！")
          })
      },

    },
    mounted () {

      this.$store.dispatch('initData').then(()=>{
        this.$store.dispatch("selectPage")
      })
      this.isNewVisited()
    },
    computed:{
       lunboList(){
         return this.$store.state.lunbo
       }
    }
  }

</script>

<style scoped>

  /*---欢迎样式---*/
     .welcome{
         background-color: #DCDFE6;
         color: hotpink;
     }
  /*---------end---*/
  .no_content{
     margin-top: 20px;
    margin-bottom: 10px;
    background-color: rgba(0,0,0,.3);

  }
  .no_content p{
      text-align: center;
      width: 100%;
      height: 30px;
      font-size: 16px;
      line-height: 30px;
  }
  #blog{
       width: 100%;
       height: 100%;
       overflow: paged-x;
       /*background-color: #E0E0E0;*/
       /*background-color: #409EFF;*/
    background-image: url("../assets/blog_bg_1.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
     overflow-x: hidden;
  }
  #blog_left{
       /*width: 100%;*/
      /*height: 250px;*/
       margin-top: 20px;
       margin-left: 8%;
    overflow: hidden;
    background-color: rgba(0,0,0,.1);

  }
  #blog_left .slideshow {
     width: 100%;
     height: 100%;
  }
  #blog_left .slideshow img{
       width: 100%;
       height: auto;
       max-height: 100%;
        object-fit: cover;
   }

  /*中间*/
  #blog_middle  .blog_list {
    width: 100%;
    height: 100%;
    /*background-color:#ffffff;*/
    background-color: rgba(0, 0, 0, .1);

  }
  .article_label{
       color: #409EFF;

    text-decoration: none;


  }
  .article_label:hover{
    cursor: pointer;
      color: #b640ff;

  }
  #thumbUp{
      color: #484891;
  }

   /*----------li 的样式，可以抽取成为一个组件------------*/
  .one_blog{
     width: 100%;
     height: 170px;
     margin-top: 20px;
    list-style: none;
    background-color: #EBEEF5;
  }
  .one_blog .one_blog_img{
     float: left;
     width:  25%;
     height: 170px;
     object-fit: cover;

  }
  .one_blog .one_blog_content{
       float: right;
       height: 170px;
    width: 73%;
     margin-left: 2%;
      position: relative;
  }

  .one_blog .one_blog_content h3{
     color: #333;
     font-size: 24px ;
     font-weight: normal;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     margin-top: 10px;
  }
  .one_blog .one_blog_content h3:hover{
      color: #8E8E8E;
      cursor: pointer;
  }
  .one_blog .one_blog_content   .blog_text{
       width: 100%;
       height: 120px;
  }
  .one_blog .one_blog_content h6{
      font-size: 16px;
      font-weight: normal;
      color: #666666;
     text-align: justify;
     margin-top: 5px;
     margin-right: 10px;
  }

  .one_blog .one_blog_content  .blog_label{
       width: 100%;
       float: left;
        height: 45px;
       position: absolute;
       bottom: 0;
    /*margin-bottom: 10px;*/
  }

  .blog_label  . three_lable{
      position: absolute;
      bottom: 0;
      right: 0;
      width: 45%;
  }
  .blog_label  ul li{
        list-style: none;
        float: right;
        margin-left: 10px;
       margin-right: 20px;

  }

  .first_label {
    height: 45px  ;
    width: 60%;
    position: absolute;
    bottom: 0;
    left: 0;

  }

  /*----结束----*/
  #blog_middle  .blog_list ul{
      list-style: none;
    width: 100%;
    height: 100%;
  }


  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
     margin-bottom: 0;
   }

  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /*轮播图css*/
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }





</style>
